import React, { useState } from 'react';
import './DeepThinkingSelector.css';

interface DeepThinkingSelectorProps {
  currentMode: string;
  onModeChange: (mode: string) => void;
  className?: string;
}

const DeepThinkingSelector: React.FC<DeepThinkingSelectorProps> = ({
  currentMode,
  onModeChange,
  className = '',
}) => {
  const [isOpen, setIsOpen] = useState(false);

  // 模式配置
  const modes = {
    auto: {
      icon: '🤖',
      name: '智能模式',
      description: '根据问题自动决定是否需要深度思考',
      color: '#4CAF50',
    },
    on: {
      icon: '🧠',
      name: '深度思考',
      description: '提供详细的分析和推理过程',
      color: '#2196F3',
    },
    off: {
      icon: '⚡',
      name: '快速回答',
      description: '直接给出简洁的答案',
      color: '#FF9800',
    },
  };

  // 处理模式切换
  const handleModeSelect = (mode: string) => {
    onModeChange(mode);
    setIsOpen(false);
  };

  return (
    <div className={`deep-thinking-selector ${className}`}>
      {/* 当前选择显示 */}
      <div className="selector-header" onClick={() => setIsOpen(!isOpen)}>
        <span className="mode-icon">
          {modes[currentMode as keyof typeof modes].icon}
        </span>
        <span className="mode-name">
          {modes[currentMode as keyof typeof modes].name}
        </span>
        <span className={`selector-arrow ${isOpen ? 'open' : ''}`}>▼</span>
      </div>

      {/* 下拉选项 */}
      {isOpen && (
        <div className="selector-dropdown">
          {Object.entries(modes).map(([mode, config]) => (
            <div
              key={mode}
              className={`mode-option ${currentMode === mode ? 'active' : ''}`}
              onClick={() => handleModeSelect(mode)}
            >
              <span className="mode-icon">{config.icon}</span>
              <div className="mode-info">
                <div className="mode-name">{config.name}</div>
                <div className="mode-desc">{config.description}</div>
              </div>
              {currentMode === mode && <span className="mode-check">✓</span>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default DeepThinkingSelector;
